<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			table{
				width: 300px;
				height: 300px;
				border-collapse: collapse;
			}
			
			td{
				border:  1px solid red;
			}
			
			.mytd{
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<table id="dt9"></table>
	</body>
	
	<script>
		
		window.onload=function(){
			
			var table = document.getElementById('dt9');
			for(var hang=1;hang<=3;hang++){
				var tr = document.createElement('tr');
				var value = 3*hang-2;
				for(var lie=1;lie<=3;lie++){
					var td = document.createElement('td');
					td.innerText=value;
					td.setAttribute('onclick','changeColor();');
					value++;
					tr.appendChild(td);
				}
				table.appendChild(tr);
			}
			
			
		}
		
		function changeColor(){
			//只要有事件 天生就由个叫event 对象 td
			
			//可以变成任何样式
			//event.srcElement.backgroundColor='green';
			//event.srcElement.fontSize='14px';
			
			//event.srcElement.bgColor="red";
			event.srcElement.setAttribute('class','mytd');

		}
	</script>
	
</html>
